/*
 * @Description: 选择车票并决定购买的页面
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:42:18
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-11-01 11:37:12
 */
<template>
  <div
    class="main"
    v-wechat-title="lineName"
  >
    <!--
    <loading
    :state="loadingState"
    :loadingType="loadingType"
  >
    </loading> -->
    <line-info
      :parentDirection="direction"
      @changeDirection="changeDirection"
      @closeLoading="closeLoading"
    ></line-info>
    <choose-type
      ref="type"
      :direction="direction"
    ></choose-type>
    <choose-population
      ref="choosePopulation"
      :direction="direction"
      @lockSeat="lockSeat"
      @lockSeatFail="lockSeatFail"
    ></choose-population>
    <div
      class="anchor"
      v-show="anchorState"
    >
      <!-- <div class="anchor"> -->
      <img
        @click="slipToTop"
        src="../../assets/anchor.png"
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      lineName: '',
      anchorState: false,
      direction: this.$route.query.direction || 1// 线路方向1上行，2下行（购票成功，参数带返程反向）
    }
  },
  mounted() {
    this.lineName = this.$route.query.routeName

    window.addEventListener('scroll', (e) => {
      this.showAnchor(e)
    }, true)
  },
  methods: {
    changeDirection(direction) { // 切换上下行
      this.direction = direction
      this.$refs.type.changeType(0, this.direction)
    },
    closeLoading() { // 获取完成线路信息数据后关闭加载中状态
      this.loadingState = false
    },
    lockSeat() { // 锁定座位时弹出加载状态
      this.loadingState = true
      this.loadingType = 'lockSeat'
    },
    lockSeatFail() { // 锁定座位失败时弹出失败状态
      this.loadingState = false
    },
    showAnchor() { // 页面滚动触发，判断返回锚点的按钮存不存在
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 200) { // 当前滚动超过200时，显示返回顶部按钮
        this.anchorState = true
      } else {
        this.anchorState = false
      }

      // // let top = e.path[0].scrollTop // 此处ptah为event元素之一，e.path[0]指#app元素
      // let top = e.path[0].scrollingElement // 此处ptah为event元素之一，e.path[0]指#app元素
      // console.warn('top', top)
      // if (top > 200) { // 当前滚动超过200时，显示返回顶部按钮
      //   this.anchorState = true
      // } else {
      //   this.anchorState = false
      // }
    },
    slipToTop() { // 返回顶部操作
      let distance = document.documentElement.scrollTop || document.body.scrollTop // 获得当前高度
      let step = distance / 25; // 每步的距离
      (function jump() {
        if (distance > 0) {
          distance -= step
          // document.documentElement.scrollTop = distance;
          // document.body.scrollTop = distance;
          window.scrollTo(0, distance)
          setTimeout(jump, 10)
        }
      })()

      // let scrolltop = document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrolltop)
      // document.documentElement.scrollTop = document.body.scrollTop = 0

      // let elem = e
      // console.log(elem)
      // console.log(elem.path[3])
      // // e.path[3].scrollTop = 0  // 此处ptah为event元素之一，e.path[3]指#app元素，该数字为元素第几级父元素
      // let timer = setInterval(() => { // 此处为返回顶部动画，避免返回顶部效果突然
      //   // console.log(e)
      //   let top = elem.path[3].scrollTop
      //   let speed = Math.ceil(top / 5)
      //   elem.path[3].scrollTop = top - speed
      //   if (top === 0) {
      //     clearInterval(timer)
      //   }
      // }, 20)
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: calc(100%-145px);
  padding-top: 32px;
  margin-bottom: 112px;
  background-color: #fff;
  .anchor {
    position: fixed;
    right: 28px;
    bottom: 206px;
    img {
      width: 112px;
      height: 112px;
    }
  }
}
</style>
